<template>
  <div class="change-course" v-show="flag">
    <div class="title"><span class="el-icon-coin"></span> 课程列表</div>
    <ul>
      <li
        :class="{ active: item.id == activeCourse.id }"
        v-for="item in teachingCourse"
        :key="item.id"
        @click="handleClick(item)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
    }
  },
  props: ['teachingCourse', 'activeCourse'],
  mounted() {},
  methods: {
    show() {
      this.flag = !this.flag
    },
    handleClick(item) {
      this.$bus.$emit('changeCourse', item)
      setTimeout(() => {
        this.show()
      }, 300)
    },
  },
}
</script>
<style scoped lang="scss">
.change-course {
  position: absolute;
  right: 0px;
  top: 60px;
  width: 260px;
  min-height: 300px;
  background: #fff;
  z-index: 2;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.3);
  .title {
    font-size: 16px;
    color: #333;
    height: 42px;
    line-height: 42px;
    text-indent: 5px;
    border-bottom: 1px solid #ddd;
  }
  ul {
    max-height: 370px;
    overflow: auto;
    // padding: 10px 0;
    li {
      font-size: 14px;
      color: #333;
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      cursor: pointer;
      transition: all 0.3s;
      border-bottom: 1px solid #eee;
      &:hover {
        background: #f5f5f5;
      }
      &.active {
        color: #fff;
        background: var(--colorH1);
      }
    }
  }
}
</style>